import React from 'react'
import './index.css' //引入css样式
import ReactDom from 'react-dom'
class Modal extends React.Component {
    //当下的组件，接受如下属性
    //1.title就是当前对话框标题
    //2.visible用于控制当前对话框的显示和隐藏
    //3. on0k一个函数，用于处理点击确定按钮的时候
    //4. onCancel一个函数，用于处理点击取消按钮
    constructor(){
        super()
        this.state = {
            isVisible: false,
            isHandleClose: false //用于控制是否点击了关闭按钮
        }
        //创建model的容器
        this.modalRoot = document.createElement('div')
        this.modalRoot.id = 'modalRoot'
    }
    componentDidMount(){
        document.body.appendChild(this.modalRoot) //将dom添加到body中
    }
    componentWillUnmount(){
        // 组件卸载的时候移除创建的dom
        document.body.removeChild(this.modalRoot)
    }
    //新的钩子函数，组件初始化和props发生变化的时候就h触发
    static getDerivedStateFromProps(nextProps, nextState) {
        // 思路:需要一个三方的属性，标记我们是否点击了X按钮，如果点击了X按钮，那么我们的isVisible从nextState中取值，并且在设置完成之后,让这个标记重置
        console.log(nextState.isHandleClose);
        if (nextState.isHandleClose) {
            // 说明点击了关闭按钮，状态应该从nextState中取
            return {
                isVisible: nextState.isVisible,
                isHandleClose: false //充值关闭按钮的状态
            }
        }
        return {
            isVisible: nextProps.visible
        }
    }
    // 解决点击x号按钮关闭model的老方法，不建议使用，因为这个钩子函数即将被淘汰
    // componentWillReceiveProps(nextProps){
    //     this.setState({
    //         isVisible:nextProps.visible
    //     })
    // }
    handleClose = () => {
        // 点击关闭x号时
        this.setState({
            isVisible: false,
            isHandleClose: true //标记我们已经点击了按钮
        })
    }
    render() {
        let { isVisible } = this.state //将isVisible从state中解构出来
        console.log(this.props);//打印的是组件传递过来的数据
        let { title, onOk, onCancel, visible, children } = this.props //将传递过来的各项数据解构出来 
        // 异常提示
        if (!onOk || typeof onOk !== 'function') {
            throw new Error('传入的onOK必须是一个函数')
        }
        if (!onCancel || typeof onCancel !== 'function') {
            throw new Error('传入的onCancel必须是一个函数')
        }
        // 定义一个元素变量，
        let modealEl = (
            <div className="modal-container">
                <div className="modal-mask">
                    <div className="modal-content">
                        <button onClick={this.handleClose} className="close">×</button>
                        <div className="header">
                            {title?title:'提示'}
                        </div>
                        <div className="body">
                            {children?children:'你确定充值吗？'}
                        </div>
                        <div className="footer">
                            <button onClick={onCancel} className="cancel">取消</button>
                            <button onClick={onOk} className="confirm">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        )
        return isVisible ? ReactDom.createPortal(modealEl,this.modalRoot) : null
    }
}
export default Modal